<template>
	<div class="container">
		<div class="item" v-for="(item,index) in data.list">
			<div class="item-img">
				<img :src="item.url" />
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { defineProps, onMounted, reactive } from 'vue'
import http from '../util/http'
const props = defineProps<{
	id: number
}>()

const data = reactive({
	id: props.id,
	page: 1,
	count: 20,
	list: []
})

onMounted(() => {

	getData()
})

function getData() {
	let url = `http://wp.birdpaper.com.cn/intf/GetListByCategory?cids=${data.id}&pageno=${data.page}&count=${data.count}"`
	http.get(url).then((res) => {
		console.log(res)
		data.list = res.data.list
	})
}

</script>

<style  scoped>
.container {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: space-between;
}

.item {
	width: 15%;
	/* margin: 20px; */
}
.item-img {
	width: 100%;
}
.item-img img {
	width: 100%;
	height: 100%;
}
</style>